{% extends '/layout.html' %}

{% block title %}Users | 小白鼠{% endblock %}

{% block css %}
    <style>
    #username {
        width: 100px;
    }
    #fullname {
        width: 200px;
    }
    #created_time {
        width: 180px;
    }
    #content td {
        text-align: center;
    }
    #username:last-child {
        text-align: right;
    }
    </style>
{% endblock %}

{% block body %}
	<div>
        <div>
            <span>Change query condition if you need:&nbsp;</span>
            <select id="select">
                <option value="username" selected>username</option>
                <option value="fullname">fullname</option>
                <option value="created">created time</option>
            </select>
            <input><a id="query" href="javascript:void(0);">Query</a>
        </div>
        <hr>
		<table border="1px">
			<tr>
                <th id="username">
                {% if judge1 %}
                    <a href="{{ url_for('users.all_users', sort_id='username', sort_type='desc', judge1=judge1) }}">用户名</a>
                {% else %}
                    <a href="{{ url_for('users.all_users', sort_id='username', sort_type='asc', judge1=judge1) }}">用户名</a>
                {% endif %}
                {% if arrows1 %}
                    <span>{{ arrows1 }}</span>
                {% endif %}
                </th>
                <th id="fullname">
                {% if judge2 %}
                    <a href="{{ url_for('users.all_users', sort_id='fullname', sort_type='desc', judge2=judge2) }}">姓名</a>
                {% else %}
                    <a href="{{ url_for('users.all_users', sort_id='fullname', sort_type='asc', judge2=judge2) }}">姓名</a>
                {% endif %}
                {% if arrows2 %}
                    <span>{{ arrows2 }}</span>
                {% endif %}
                </th>
                <th id="created_time">
                {% if judge3 %}
                    <a href="{{ url_for('users.all_users', sort_id='created', sort_type='desc', judge3=judge3) }}">创建时间</a>
                {% else %}
                    <a href="{{ url_for('users.all_users', sort_id='created', sort_type='asc', judge3=judge3) }}">创建时间</a>
                {% endif %}
                {% if arrows3 %}
                    <span>{{ arrows3 }}</span>
                {% endif %}
                </th>
            </tr>
			{% for user in users %}
				<tr id="content"><td>{{ user.username }}</td><td>{{ user.fullname }}</td><td>{{ user.created_time }}</td></tr>
			{% endfor %}
		</table>
		<div>
			<a href="{{ url_for('users.all_users', page=1 if pagination.page==1 else pagination.page - 1, sort_id=sort_id, sort_type=sort_type) }}">上一页</a>
			<a href="{{ url_for('users.all_users', page=pagination.page + 1 if pagination.page<pagination.pages else pagination.pages, sort_id=sort_id, sort_type=sort_type) }}">下一页</a>
			<span id="now">当前为&nbsp;{{ pagination.page }}&nbsp;页</span>
			<span>共&nbsp;{{ pagination.pages }}&nbsp;页</span>
		</div>
	</div>
    <script>
        $('#query').click(() => {
            var username = $('#select option:selected').text();
            location.href="{{ url_for('home.index') }}?username=" + username;
        });
    </script>
{% endblock %}
